<template>
  <div class="home">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>今日支付订单</span>
            </div>
          </template>
          <div class="card-content">
            <div class="number">{{ todayPaymentCount }}</div>
            <div class="amount">¥{{ todayPaymentAmount }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>今日退款订单</span>
            </div>
          </template>
          <div class="card-content">
            <div class="number">{{ todayRefundCount }}</div>
            <div class="amount">¥{{ todayRefundAmount }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>待处理退款</span>
            </div>
          </template>
          <div class="card-content">
            <div class="number">{{ pendingRefundCount }}</div>
            <div class="amount">¥{{ pendingRefundAmount }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>最近支付订单</span>
              <el-button type="primary" link @click="$router.push('/payment')">
                查看更多
              </el-button>
            </div>
          </template>
          <el-table :data="recentPayments" style="width: 100%">
            <el-table-column prop="orderNo" label="订单号" width="180" />
            <el-table-column prop="amount" label="金额" width="120">
              <template #default="{ row }">
                ¥{{ row.amount }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="120">
              <template #default="{ row }">
                <el-tag :type="getStatusType(row.status)">
                  {{ getStatusText(row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>最近退款记录</span>
              <el-button type="primary" link @click="$router.push('/refund')">
                查看更多
              </el-button>
            </div>
          </template>
          <el-table :data="recentRefunds" style="width: 100%">
            <el-table-column prop="refundNo" label="退款单号" width="180" />
            <el-table-column prop="amount" label="金额" width="120">
              <template #default="{ row }">
                ¥{{ row.amount }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="120">
              <template #default="{ row }">
                <el-tag :type="getStatusType(row.status)">
                  {{ getStatusText(row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const todayPaymentCount = ref(0)
const todayPaymentAmount = ref(0)
const todayRefundCount = ref(0)
const todayRefundAmount = ref(0)
const pendingRefundCount = ref(0)
const pendingRefundAmount = ref(0)
const recentPayments = ref([])
const recentRefunds = ref([])

const getStatusType = (status) => {
  const types = {
    0: 'warning',
    1: 'success',
    2: 'danger'
  }
  return types[status] || 'info'
}

const getStatusText = (status) => {
  const texts = {
    0: '待处理',
    1: '成功',
    2: '失败'
  }
  return texts[status] || '未知'
}

const fetchDashboardData = async () => {
  try {
    // 这里应该调用后端接口获取数据
    // 目前使用模拟数据
    todayPaymentCount.value = 10
    todayPaymentAmount.value = 1000
    todayRefundCount.value = 3
    todayRefundAmount.value = 300
    pendingRefundCount.value = 2
    pendingRefundAmount.value = 200
  } catch (error) {
    ElMessage.error('获取数据失败')
  }
}

const fetchRecentPayments = async () => {
  try {
    const response = await axios.get('/api/payment/query', {
      params: {
        page: 1,
        size: 5
      }
    })
    recentPayments.value = response.data.records
  } catch (error) {
    ElMessage.error('获取支付数据失败')
  }
}

const fetchRecentRefunds = async () => {
  try {
    const response = await axios.get('/api/refund/query', {
      params: {
        page: 1,
        size: 5
      }
    })
    recentRefunds.value = response.data.records
  } catch (error) {
    ElMessage.error('获取退款数据失败')
  }
}

onMounted(() => {
  fetchDashboardData()
  fetchRecentPayments()
  fetchRecentRefunds()
})
</script>

<style scoped>
.home {
  padding: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  text-align: center;
  padding: 20px 0;
}

.number {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 10px;
}

.amount {
  font-size: 16px;
  color: #666;
}
</style> 